<template>
    <div
        class="relative flex h-60 w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl bg-black">
        <span
            class="text-3xl pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center  font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
            <slot/>
        </span>
        <ParticlesBg class="absolute inset-0" :quantity="100" :ease="100" :color="isDark ? '#FFF' : '#000'"
            :staticity="10" refresh />
    </div>
</template>

<script setup lang="ts">

import ParticlesBg from "./particlesBackground.vue";

const isDark = 'dark'
</script>